Brian Stowell

Advanced CSS: Assignment 1:1

Research and Define CSS Terms

1. Specificity: is basically a score or ranking system that is used when there are two or more conflicting CSS rules that are used with the same element. Specificity allows the browser to figure out which one is the most "specific", and ultimately takes precedence and are applied to an element. There are four categories that define the specificity level of a selector, within the hierarchy. Inline styles, IDs, Classes/attributes/pseudo-classes, and elements/pseudo elements.

2. Precedence: In terms of CSS, this applies to which CSS rules take effect over others, when more than one CSS rule is attempting to apply the same HTML elements. Inline styles take precedence over embedded styles and external styles. Embedded styles take priority only over external styles. External styles don't take priority over either inline or embedded, but they can with special declaration.

The order of precedence for CSS selectors is:

                The ID overrides all other selectors.

                Attribute selector overrides the class, child, adjacent sibling, descendent, and type selectors.

                The child selector overrides the adjacent sibling, descendant, and type selectors.

                The adjacent sibling selector overrides the descendant selector and the type selector.

                Lastly, the descendant selector overrides the type selector.

3. Inheritance: Some CSS properties will inherit values that are set on the current element's parent element. Inherit changes all the properties applied to the element or the element's parent to their parent value. You can use the "inherit" value to apply the same values to another element from the parent element as well. For example:

.foo {

  background-color: white;

  color: black;

}

.fighters {

  background-color: inherit;

  color: inherit;

  font-weight: normal;

}

4. Property: Within CSS is a characteristic, such as color, font, width, etc., that define one aspect of how the browser should display the element. For instance, text-align is a property that tells the browser how to align the text within the webpage, usually depicted at left, right, or center. There are hundreds of properties that we can use to make elements display the way that we want them to within the browser.

5. Value: Each property has a value type that defines the set of values that are allowed for that property. For example, background-color can be set to any available color for use within the color keyword list, RGB values, or Hexadecimals values. Another example of a value within a property are lengths such as centimeters, inches, or pixels. The height of the image is 300px, as a simple example.

6.  Selectors: These are used to find or select the HTML elements that we want to style. Examples of selectors include simple selectors (name, id, class), combinator selectors, pseudo-class, pseudo elements, and attribute selectors. An example of an element selector that will make all the <p> elements on the page right-align with a blue text color.

p {

  text-align: right;

  color: blue;

}

An id selector that would create the same result is as follows, with the id="para1":

#para1 {

                text-align: right;

                color: blue;

}